import React, {useEffect, useState} from 'react';
import Shouru from "@/pages/dashboard/Shouru";
import {Button, Card, DatePicker, Form, InputNumber, message, Modal, Space, Statistic} from "antd";
import dayjs from "dayjs";
import {Seat, Text} from "@/cms/layout";
import {useBankInfo} from "@/pages/constant";
import {useNavigate} from "react-router-dom";
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
function Dashboard(props) {
    const navigate = useNavigate();
    const [date1,setDate1] = useState([
        dayjs().subtract(1,"week"),
        dayjs()
    ])
    const [amount,setamount] = useState(0),
        [open,setOpen] = useState(false),
        {bankInfo} = useBankInfo(),
        [loading,setLoading] = useState(false),
        [form] = Form.useForm();
    useEffect(()=>{
        getAmount()
    },[])
    function getAmount(){
        ax.get("/app/getAmount",{
            params:{
                companyId:window.company_id,
            }
        }).then(res=>{
            setamount(res)
        })
    }
    function onCancel(){
        setOpen(false)
    }
    function onCashOut(){
        form.validateFields().then(values=>{
            setLoading(true)
            ax.post("/app/cashOut",{
                ...values,
                companyId:window.company_id,
            }).then(res=>{
                message.success(res.msg)
                setOpen(false)
                getAmount()
            }).finally(()=>{
                setLoading(false)
            })
        })
    }
    return (
        <div>
            <Space>
                <Statistic title="账户余额 (CNY)" value={amount.amount} precision={2} />
                <Button style={{ marginTop: 16 }} type="primary" onClick={()=>{
                    if (bankInfo.length === 0){
                        Modal.info({
                            title:"提示",
                            content:"请先完善银行卡信息",
                            onOk(){
                                navigate("/ouyu/bankInfo")
                            }
                        })
                        return;
                    }
                    setOpen(true)
                }}>
                    提现
                </Button>
                <Space>
                    <Statistic title="提现中 (CNY)" value={amount.balance} precision={2} />
                    <Statistic title="累计提现 (CNY)" value={amount.total} precision={2} />
                </Space>


            </Space>

            <Seat h={20}/>
            <Card
                title={"收入曲线"}
                extra={ <RangePicker
                    value={date1}
                    onChange={(date)=>{
                        setDate1(date)
                    }}
                />}
            >
                <Shouru
                    startDate={date1[0].format(dateFormat)}
                    endDate={date1[1].format(dateFormat)}
                />
            </Card>
            <Modal
                title={"提现"}
                onCancel={onCancel}
                open={open}
                onOk={onCashOut}
                confirmLoading={loading}
            >
                <Form
                    form={form}
                >
                    <Form.Item
                        label={"提现金额"}
                        name={"balance"}
                        rules={[{required:true}]}
                    >
                        <InputNumber min={0} max={amount.amount}  style={{width:"100%"}} placeholder={"请输入提现金额"}/>
                    </Form.Item>
                    <Text color={"red"}>最大可提现金额: {amount.amount} 元</Text>
                </Form>

            </Modal>
        </div>
    );
}

export default Dashboard;